<script lang="tsx">
// import { h } from "vue"
//  vue中除了使用template定义模板结果, 还可以使用render函数来渲染, 和template标签是互斥
export default {
  // render函数return的结果会当做当前组件的模板结构
  /*  render() {
     return h('h1', { title: 'h1大标题', id: 'header' }, '我是大标题')
   } */
  /*render() {
      const li1 = h('li', {}, '苹果')
      const li2 = h('li', {}, '橘子')
      const li3 = h('li', {}, '香蕉')
      const li4 = h('li', {}, '榴莲')
      return h('ul', {}, [li1, li2, li3, li4])
    } */
  // render + h创建复杂的结构 力不从心
  // 即便配置了JSX/TSX 看的是html结构, 其实都是虚拟DOM
  render() {
    return (
      <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
      </ul>
    )
  }
}
</script>
<!-- render函数定义组件模板结构 和template标签是互斥 -->

<style scoped>
#header {
  width: 300px;
  height: 300px;
  background-color: red;
}
</style>